<div class="text-center">
    <h2 class="text-xl font-semibold mb-4">安装须知</h2>
    <div class="text-left max-w-2xl mx-auto space-y-4 text-gray-600">
        <h3 class="font-medium text-gray-800">安装环境要求：</h3>
        <ul class="list-disc list-inside space-y-2 ml-4">
            <li>PHP >= 8.3.0</li>
            <li>必须安装 fileinfo、GD 扩展</li>
            <li>必须启用 system 函数</li>
            <li>PDO 扩展支持</li>
        </ul>

        <h3 class="font-medium text-gray-800 mt-6">目录权限要求：</h3>
        <ul class="list-disc list-inside space-y-2 ml-4">
            <li>runtime 目录可写</li>
            <li>public/uploads 目录可写</li>
            <li>config 目录可写</li>
        </ul>
    </div>
    
    <div class="mt-8">
        <label class="inline-flex items-center mb-4">
            <input type="checkbox" id="agree" class="form-checkbox h-5 w-5 text-blue-500" onchange="toggleNextButton()">
            <span class="ml-2">我已阅读并同意安装须知</span>
        </label>
        <div>
            <a href="index.php?action=env-check" id="nextBtn" class="bg-blue-500 text-white px-6 py-2 rounded-md hover:bg-blue-600 transition-colors opacity-50 cursor-not-allowed pointer-events-none inline-block">
                下一步：环境检测
            </a>
        </div>
    </div>
</div>

<script>
function toggleNextButton() {
    const agreeCheckbox = document.getElementById('agree');
    const nextBtn = document.getElementById('nextBtn');
    
    if (agreeCheckbox.checked) {
        nextBtn.classList.remove('opacity-50', 'cursor-not-allowed', 'pointer-events-none');
    } else {
        nextBtn.classList.add('opacity-50', 'cursor-not-allowed', 'pointer-events-none');
    }
}

// 页面加载时初始化按钮状态
document.addEventListener('DOMContentLoaded', function() {
    const agreeCheckbox = document.getElementById('agree');
    agreeCheckbox.checked = false;
    toggleNextButton();
});
</script> 